<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <div id="app">
      <ul>
        <!-- 默认字符串为路径参数 -->
        <li @click="redirectByPath('/')">Home</li>
        <li>
          <!-- 指定参数为路径 -->
          <div @click="redirectByPath('/about')">About</div>
          <ul>
            <!-- 嵌套路由-->
            <li @click="redirectByPath('/about/author')">About - Author</li>
            <!-- 嵌套路由, 动态路由, 当使用path时, params参数不生效 -->
            <!-- <li @click="redirectByPath('/about/email', { email: lonelydawn@sina.com' })">About - Email</li> -->
            <!-- 嵌套路由, 动态路由, 可以直接将参数写入path -->
            <li @click="redirectByPath('/about/email/lonelydawn@sina.com')">About - Email</li>
            <!-- 嵌套路由, 动态路由, 使用命名路由跳转视图 -->
            <li @click="redirectByName('Email', { email: 'singledawn@sina.com' })">About - Email</li>
          </ul>
        </li>
      </ul>
      <router-view></router-view>
    </div>
    <script type="text/javascript">
      let Home = { template: '<h1>This is Home!</h1>' } // Home组件
      let About = { // About组件
        template: '<div>' + 
        '<h1>This is About!</h1>' + 
        '<router-view></router-view>' +  // 嵌套的动态视图区
        '</div>'
      }
      let Author = { template: '<p>Author: lonelydawn</p>' }
      let Email = { template: '<p>Email: {{ $route.params.email }}</p>' }
      let routes = [ // 定义路由规则, 每一个路由规则应该映射一个视图组件
        { path: '/', component: Home },
        { 
          path: '/about',
          component: About,
          children: [ // 嵌套子路由
            { name: 'Author', path: 'author', component: Author },
            { name: 'Email', path: 'email/:email', component: Email }
          ]
        }
      ]
      let router = new VueRouter({ // 创建VueRouter实例, 并传入routes配置
        routes
      })
      let app = new Vue({
        methods: {
          redirectByPath (path, params) {
            this.$router.push({ path, params })
          },
          redirectByName (name, params) {
            this.$router.push({ name, params })
          }
        },
        router
      }).$mount('#app')
    </script>
    </body>
</html>